<template>
  <!-- 登录页面 -->
  <div>
    <Row class="container">
      <!--左侧图片容器-->
      <i-col span="13" offset="2" class="login-img-box">
        <img src="static/img/sale.jpg" alt="">
      </i-col>
      <!--登录框-->
      <i-col span="7" class="login-box">
        <div class="login-container">
          <div class="login-header">
            <p>欢迎登录</p>
          </div>
          <div class="form-box">
            <!--formInline就是表单的实例对象-->
            <Form ref="formInline" :model="csmLogin" :rules="ruleInline">
              <FormItem prop="account">
                <i-input type="text" v-model="csmLogin.account" clearable size="large" placeholder="用户名">
                  <Icon type="person" slot="prepend"></Icon>
                </i-input>
              </FormItem>
              <FormItem prop="password">
                <i-input type="password" v-model="csmLogin.password" clearable size="large" placeholder="密码">
                  <Icon type="ios-locked-outline" slot="prepend"> </Icon>
                </i-input>
              </FormItem>
              <FormItem>
                <!--登录-->
                <Button type="error" size="large" @click="handleSubmit('formInline')" long>登录</Button>
              </FormItem>

              <FormItem>
                <!--注册-->
                <Button size="large" @click="register" long>注册</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import store from '../vuex/store';
import { mapMutations, mapActions } from 'vuex';
import { userLogin, userInfo } from '../api/user.js';
export default {
  name: 'Login',
  data() {
    return {
      // 这是登录表单的数据绑定对象，双向绑定
      csmLogin: {
        account: '',
        password: ''
      },
      // 表单验证规则
      ruleInline: {
        // 验证用户名是否合法
        account: [
          // 鼠标失去焦点时触发验证
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 长度区间
          { type: 'string', min: 3, max: 8, message: '密码不能少于6位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(['SET_USER_LOGIN_INFO']),
    ...mapActions(['login']),
    register() {
      this.$router.push('/SignUp');
    },
    handleSubmit(name) {
      let params = new URLSearchParams();
      params.append('account', this.csmLogin.account);
      params.append('password', this.csmLogin.password);
      this.$axios
        (
          {
            method: 'get',
            url: '/check',
            params
          }
        ).then((result) => {
          if (result.data === 'success') {
            this.$router.push('/Home');
          } else {
            this.$Message.error('用户名或密码错误');
          }
        }).catch((err) => {
          console.log(err)
        });
      const father = this;
      // 登录前的表单预验证
      this.$refs[name].validate((valid) => {
        // 符合要求就是true
        if (valid) {
          // 预验证通过再判断账号密码是否存在
          userLogin(father.csmLogin).then(res => {
            if (res.data.code === '00000') {
              // 获取用户信息
              userInfo().then(res => {
                if (res.data.code === '00000') {
                  // message消息提示
                  father.$Message.success('登录成功！');
                  father.$router.push({
                    // 要跳转的页面
                    name: 'Index',
                    // 传递参数
                    query: { account: res.data.data.account, id: res.data.data.id }
                  });
                  this.$store.commit('setUserName', res.data.data.account);
                } else {
                  father.$Message.error(res.data.message);
                }
              }).catch(error => {
                father.$Message.error(error.message);
              });
            } else {
              father.$Message.error(res.data.message);
            }
          }).catch(error => {
            father.$Message.error(error.message);
          });
        } else {
          // valid=false,预验证失败，即填写格式不满足要求
          this.$Message.error('请填写正确的用户名或密码');
        }
      });
    }
  },
  store
};
</script>

<style scoped>
.container {
  margin-top: 30px;
  height: 485px;
  background-color: #fff;
}

.login-img-box {
  height: 485px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-img-box>img {
  width: 68%;
}

.login-box {
  height: 485px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  width: 80%;
  height: 320px;
  border: #ED3F14 solid 2px;
}

.login-header {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
  color: #fff;
  background-color: #ED3F14;
}

.form-box {
  width: 80%;
  margin: 30px auto;
}
</style>
